<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试播放器</title>
    <script src="/jquery/jquery.js"></script>
</head>
<body>
<div id="video" style="width: 600px; height: 400px;"></div>
<br>
<div style="width: 100%;border: 1px solid red;">
    <div style="width: 49%;border: 1px solid #50802e;float: left;" id="select-box">
        <input value="d:\hzcode\ckplayer\video\temp" id="basePath" />
        <select id="file-select">
            <option value="">请选择</option>
        </select>
        <button onclick="newVideo()">播放</button>
        <button onclick="newVideoVideo()">播放Video</button>
        <button onclick="fileListLoad()">拉取列表</button>
        <a href="/aliplay" target="_blank">阿里播放</a>
    </div>
    <div style="width: 50%;border: 1px solid blue;float: left;" id="console-box">

    </div>
</div>
<br>
<a href="/jqplayer">列表2jqplayer</a>
<br>
<div style="width: 100%;border: 1px solid red;" id="box2">
</div>
<br>
<script type="text/javascript" src="/ckplayer/ckplayer.js"></script>
<script type="text/javascript">

    /**
     * 获取根目录
     */
    window.getHost = function () {
        var domain = "http://"+window.location.host+'';
        return domain;
    };

    var videoObject = {
        container: '#video', //容器的ID或className
        variable: 'player',
        flashplayer: false, //是否需要强制使用flashplayer
        loaded: 'loadedHandler', //当播放器加载后执行的函数
        video: 'https://xiaosun-pub.oss-cn-hangzhou.aliyuncs.com/jflyfox/bbs/ueditor/video/20191115/20191115_231223_397829.mp4'
    };
    var player = new ckplayer(videoObject);

     /**
     * 加载结束后执行
     */
    function loadedHandler() {
        player.addListener('loadedmetadata', loadedMetaDataHandler); //监听元数据
    };

    /**
     * 视频信息
     */
    function loadedMetaDataHandler() {
        var metaData = player.getMetaDate();
        var html = ''
        html += '总时间：' + metaData['duration'] + '秒，<br/>';
        html += '音量：' + metaData['volume'] + '（范围0-1），<br/>';
        html += '播放器的宽度：' + metaData['width'] + 'px，<br/>';
        html += '播放器的高度：' + metaData['height'] + 'px，<br/>';
        html += '视频宽度：' + metaData['videoWidth'] + 'px，<br/>';
        html += '视频高度：' + metaData['videoHeight'] + 'px，<br/>';
        html += '视频原始宽度：' + metaData['streamWidth'] + 'px，<br/>';
        html += '视频原始高度：' + metaData['streamHeight'] + 'px，<br/>';
        html += '是否暂停状态：' + metaData['paused']+'<br/>';
        console.log(html);
        $('#console-box').empty().append(html);
    };

     /**
     * 改变视频地址
     */
    function changeVideo(videoUrl) {
        if(player == null) {
            return;
        }

        var newVideoObject = {
            container: '#video', //容器的ID
            variable: 'player',
            autoplay: true, //是否自动播放
            // html5m3u8:true,
            loaded: 'loadedHandler', //当播放器加载后执行的函数
            video: videoUrl
        }
        //判断是需要重新加载播放器还是直接换新地址

        if(player.playerType == 'html5video') {
            if(player.getFileExt(videoUrl) == '.flv' || player.getFileExt(videoUrl) == '.m3u8'
                || videoUrl.indexOf('.m3u8')>=0
                || player.getFileExt(videoUrl) == '.f4v' || videoUrl.substr(0, 4) == 'rtmp') {
                player.removeChild();

                player = null;
                player = new ckplayer();
                player.embed(newVideoObject);
            } else {
                player.newVideo(newVideoObject);
            }
        } else {
            if(player.getFileExt(videoUrl) == '.mp4' || player.getFileExt(videoUrl) == '.webm' || player.getFileExt(videoUrl) == '.ogg') {
                player = null;
                player = new ckplayer();
                player.embed(newVideoObject);
            } else {
                player.newVideo(newVideoObject);
            }
        }
    };
    /**
     * 切换
     */
    function newVideo() {
        var videoUrl = $('#file-select').val();
        videoUrl = getHost()+'/player?videoUrl='+videoUrl;
        changeVideo(videoUrl);
    };
    //video播放
    function newVideoVideo(){
        var videoUrl = $('#file-select').val();
        var _playerVideoUrl = getHost()+'/player?videoUrl='+videoUrl;
        var _openUrl  = getHost()+'/videoPlay?videoUrl='+_playerVideoUrl+'&title='+videoUrl;
        window.location.href=_openUrl;
    };
    //ajax 请求 file-select
    function fileListLoad() {
        $.ajax({
            type: "post",
            async: true,
            url: getHost()+'/fileListLoad?v='+Math.random(),
            dataType: "json",
            data:{'basePath':$('#basePath').val()},
            success: function(data){
                console.log(data);
                var _res = JSON.parse(data);
                if(null != _res['data']){
                    var _d = _res['data'];
                    var _optionArr = new Array();
                    var _optionUrlArr = new Array();
                    $(_d).each(function (_k,_v) {
                        var _option = '<option value="'+_v+'">'+_v+'</option>';
                        _optionArr.push(_option);
                        var _videoUrl = getHost()+'/player?videoUrl='+_v;
                        var _urlDom = '<a href="'+_videoUrl+'">'+_v+'</a></br>';
                        _optionUrlArr.push(_urlDom);
                    });
                    $('#file-select').empty().append(_optionArr.join(''));
                    $('#box2').empty().append(_optionUrlArr.join(''));
                }
            },
            error: function(){
            }
        });
    };
    //初始化
    $(function(){
        fileListLoad();
    });
</script>
</body>
</html>